<template>
  <div class="helpCenter w1190">
      <div class="helpTop text-center">
        <h2 class="commonTitle">帮助中心</h2>
        <div class="questionOuter">
          <!-- <input type="text" placeholder="请输入您的问题......" class="question">
          <i class="iconfont icon-sousuo searchIcon" @click="search"></i> -->
        </div>
    </div>
    <div class="helpBot clearfix">
      <ul class="helpBotLeft pull-left">
        <li>
            <h2 style="margin: 24px 0 19px 0;">注册登录问题</h2>
            <a href="javascript:;" @click="linkToPage('Register')" :class="{ red : redRegister }">注册流程</a>
            <a href="javascript:;" @click="linkToPage('LoginPerson')" :class="{ red : loginPerson }">个人登录流程</a>
            <a href="javascript:;" @click="linkToPage('LoginCompany')" :class="{ red : loginCompany }">企业登录流程</a>
        </li>
        <li>
            <h2>实名认证问题</h2>
            <a href="javascript:;" @click="linkToPage('ApprovePerson')" :class="{ red : approvePerson }">个人认证流程</a>
            <a href="javascript:;" @click="linkToPage('ApproveCompany')" :class="{ red : approveCompany }">企业认证流程</a>
        </li>
        <li>
            <h2>合同签署问题</h2>
            <a href="javascript:;" @click="linkToPage('AddChapter')" :class="{ red : addChapter }">如何添加个人印章</a>
            <a href="javascript:;" @click="linkToPage('SendSign')" :class="{ red : sendSign }">如何发起合同签署</a>
            <a href="javascript:;" @click="linkToPage('Oneself')" :class="{ red : oneself }">如何确保本人签署</a>
        </li>
        <li class="lastLi">
            <h2>合同管理问题</h2>
            <a href="javascript:;" @click="linkToPage('ServeTime')" :class="{ red : serveTime }">如何保存合同，保存多久</a>
            <a href="javascript:;" @click="linkToPage('ServeWhere')" :class="{ red : serveWhere }">签署后的合同保存在哪？</a>
            <a href="javascript:;" @click="linkToPage('IsTrue')" :class="{ red : isTrue }">如何验证电子合同真伪</a>
        </li>
      </ul>
      <ul class="helpBotRight pull-left">
          <!-- 注册 -->
         <li class="helpBotRightLi" v-if="redRegister">
             <h2>Q : 注册流程</h2>
             <p>第一步：打开五孚签首页https://www.5fsign.com/，点击“注册”；</p>
             <p>第二步：跳转至注册页面，在注册页面上填写相关的注册信息：输入手机号，点击“发送验证码”，依次按照要求设置登陆密码，再次输入登录密码，然后输入图片验证码；</p>
             <p>第三步：接受系统发送短信验证码，打开手机查收短信；</p>
             <p>第四步：填写手机验证码，勾选已阅读并同意《使用协议》及《隐私条款》，点击“注册”按钮；</p>
             <p>第五步：注册成功。</p>
             <div class="imgOuter" @click="a('Register')">
               <img :src="imgList.register" yyt="imgList.register" class="bigImg">
               <div class="shade">
                   <div class="shadeText clearfix">
                       <img :src="imgList.enlarge" alt="" class="clickImg pull-left">
                       <p class="clickText pull-left">点击查看大图</p>
                   </div>
               </div>
             </div>
         </li>
         <!-- 登录 -->
        <li class="helpBotRightLi" v-if="login">
             <h2>Q : 登录流程</h2>
             <p>A：第一步：打开五孚签首页https://www.5fsign.com/，点击“登录”；</p>
             <p>第二步：（选择登录方式一：手机验证码登录（系统默认））跳转至登录页面，输入手机号，点击发送短信验证码，输入发送至手机上的短信验证码，点击”登录“，即可快速进入您的五孚签个人中心；</p>
             <div class="imgOuter" @click="a('Login1')">
               <img :src="imgList.login1" class="bigImg">
               <div class="shade">
                   <div class="shadeText clearfix">
                       <img :src="imgList.enlarge" alt="" class="clickImg pull-left">
                       <p class="clickText pull-left">点击查看大图</p>
                   </div>
               </div>
             </div>
             <p>(方式二：账号密码登录)</p>
             <p>进入登录页面后，点击账号密码登陆，依次输入您的手机号/邮箱，登陆密码，点击”登录“，即可进入您的五孚签个人中心；如果您忘记密码，可点击“忘记密码”，页面会跳转至重置密码页面，重置密码后即可自动跳转至登录页面进行登录。</p>
             <div class="imgOuter" @click="a('Login2')">
               <img :src="imgList.login2" class="bigImg">
               <div class="shade">
                   <div class="shadeText clearfix">
                       <img :src="imgList.enlarge" alt="" class="clickImg pull-left">
                       <p class="clickText pull-left">点击查看大图</p>
                   </div>
               </div>
             </div>
         </li>
         <!-- 个人认证 -->
         <li class="helpBotRightLi" v-if="approvePerson">
             <h2>Q : 个人认证流程</h2>
             <p>A：第一步：登录并进入您的五孚签个人中心；</p>
             <p>第二步：点击“实名认证”，进入实名认证页面；</p>
             <p>（认证方式一手机app认证）</p>
             <p>扫码下载五孚签app，登录app界面，在手机app中输入提交您个人的实名认证信息，包括您的户口本常用姓名、证件类型（一般情况下是居民二代身份证）、证件号码（系统会获取您的手机摄像头权限，进行身份证信息的识别）以及您的个人常用邮箱，基本信息输入完毕后，点击“确认”，就完成了您个人的实名认证。</p>
             <div class="imgOuter" style="width: 275px;height: 480px;" @click="a('approvePerson1')">
               <img :src="imgList.approvePerson1" class="bigImg">
               <div class="shade">
                   <div class="shadeText clearfix" style="margin: 221px auto;">
                       <img :src="imgList.enlarge" alt="" class="clickImg pull-left">
                       <p class="clickText pull-left">点击查看大图</p>
                   </div>
               </div>
             </div>
             <p>（认证方式二PC端认证）</p>
             <p>用户可以按照电脑PC端页面的提示信息，依次输入提交您的个人姓名、身份证号码、身份证正反面面图片以及您的个人常用邮箱，信息输入完毕后，点击“确认提交”，就完成了您个人的实名认证。</p>
             <div class="imgOuter" style="height: 460px;" @click="a('approvePerson2')">
               <img :src="imgList.approvePerson2" class="bigImg">
               <div class="shade">
                   <div class="shadeText clearfix" style="margin: 211px auto;">
                       <img :src="imgList.enlarge" alt="" class="clickImg pull-left">
                       <p class="clickText pull-left">点击查看大图</p>
                   </div>
               </div>
             </div>
         </li>
         <!-- 企业认证 -->
         <li class="helpBotRightLi" v-if="approveCompany">
             <h2>Q : 企业认证流程</h2>
             <p>A：第一步：登录并进入企业中心；</p>
             <p>第二步：进入实名认证页面；</p>
             <p>（认证方式一手机app认证）</p>
             <p>手机扫码并下载五孚签app，登录手机app，在app页面中依次输入提交您的企业实名认证信息，包括您的企业名称、统一社会信用代码、上传您的执照文件图片、填写您的企业邮箱、企业法人姓名，输入您企业的法人身份证号码（系统会获取您的手机摄像头权限，进行身份证信息的识别），以上信息输入完毕后，点击“确认”，就完成了企业的实名认证。</p>
             <div class="imgOuter" style="width: 275px;height: 480px;" @click="a('approveCompany1')">
               <img :src="imgList.approveCompany1" class="bigImg">
               <div class="shade">
                   <div class="shadeText clearfix" style="margin: 221px auto;">
                       <img :src="imgList.enlarge" alt="" class="clickImg pull-left">
                       <p class="clickText pull-left">点击查看大图</p>
                   </div>
               </div>
             </div>
             <p>（认证方式二PC端认证）</p>
             <p>用户可以按照电脑PC端页面，企业实名认证的提示信息，输入提交企业名称、统一社会信用代码、上传企业的证件文件（营业执照）、输入您的企业邮箱、法人姓名、法人的身份证号码、并上传法人身份证的正反面图片，最后点击确认提交，就完成了企业的实名认证。</p>
             <div class="imgOuter" style="height: 460px;" @click="a('approveCompany2')">
               <img :src="imgList.approveCompany2" class="bigImg">
               <div class="shade">
                   <div class="shadeText clearfix" style="margin: 211px auto;">
                       <img :src="imgList.enlarge" alt="" class="clickImg pull-left">
                       <p class="clickText pull-left">点击查看大图</p>
                   </div>
               </div>
             </div>
         </li>
         <!-- 添加个人印章 -->
         <li class="helpBotRightLi" v-if="addChapter">
             <h2>Q : 如何添加个人印章</h2>
             <p class="explain">（如果您的账号尚未进行实名认证，签署文件之前需要先进行认证）</p>
             <p>A：第一步：登录用户中心，进入右上角我的签章区域，点击“编辑”，进入签章的编辑页面；</p>
             <div class="imgOuter" style="height: 542px;" @click="a('addChapter1')">
               <img :src="imgList.addChapter1" class="bigImg">
               <div class="shade">
                   <div class="shadeText clearfix" style="margin: 221px auto;">
                       <img :src="imgList.enlarge" alt="" class="clickImg pull-left">
                       <p class="clickText pull-left">点击查看大图</p>
                   </div>
               </div>
             </div>
             <p>第二步：点击添加按钮 ，打开手机微信扫一扫，或者五孚签app扫描网页中显示的二维码，在app上进行签章的创建；</p>
             <div class="imgOuter" style="height: 366px;" @click="a('addChapter2')">
               <img :src="imgList.addChapter2" class="bigImg">
               <div class="shade">
                   <div class="shadeText clearfix" style="margin: 164px auto;">
                       <img :src="imgList.enlarge" alt="" class="clickImg pull-left">
                       <p class="clickText pull-left">点击查看大图</p>
                   </div>
               </div>
             </div>
             <p>第三步：点击确认，就完成了签章的创建，即可上传您创建的签章图片；</p>
             <div class="imgOuter" style="height: 460px;" @click="a('addChapter3')">
               <img :src="imgList.addChapter3" class="bigImg">
               <div class="shade">
                   <div class="shadeText clearfix" style="margin: 211px auto;">
                       <img :src="imgList.enlarge" alt="" class="clickImg pull-left">
                       <p class="clickText pull-left">点击查看大图</p>
                   </div>
               </div>
             </div>
             <p>第四步：上传完毕后，返回您的签名管理列表，即可看到新增的签名图片；</p>
             <p class="explain" style="margin-bottom: 10px;">（提示：如果您添加了多个签名，可对您常用的签名进行设置默认操作，被设置为默认的签名图片将在签署页面直接使用）</p>
         </li>
         <!-- 发起合同签署 -->
         <li class="helpBotRightLi" v-if="sendSign">
             <h2>Q : 如何发起合同签署</h2>
             <p>A：第一步：登录用户中心，进入个人中心页面，点击“开始签约”；</p>
             <div class="imgOuter" style="height: 542px;" @click="a('sendSign1')">
               <img :src="imgList.addChapter1" class="bigImg">
               <div class="shade">
                   <div class="shadeText clearfix" style="margin: 252px auto;">
                       <img :src="imgList.enlarge" alt="" class="clickImg pull-left">
                       <p class="clickText pull-left">点击查看大图</p>
                   </div>
               </div>
             </div>
             <p>第二步：您可选择从本地文件上传合同或者从我的模版选择合同。从本地文件选择，您可以按照个人需要，对合同内容、格式进行编辑后上传，支持DOC和PDF两种格式的文件；从我的模板中选择，系统提供部分合同模板，用户可根据个人需要，自行选择；</p>
             <div class="imgOuter" style="height: 464px;" @click="a('sendSign2')">
               <img :src="imgList.sendSign2" class="bigImg">
               <div class="shade">
                   <div class="shadeText clearfix" style="margin: 213px auto;">
                       <img :src="imgList.enlarge" alt="" class="clickImg pull-left">
                       <p class="clickText pull-left">点击查看大图</p>
                   </div>
               </div>
             </div>
             <p>第三步：按照网页提示信息，依次填写合同名称、添加签署方（系统支持手动直接输入、从已有联系人中进行快捷添加两种方式），点击“下一步”，进入签署的动画引导页面；</p>
             <div class="imgOuter" style="height: 464px;" @click="a('sendSign3')">
               <img :src="imgList.sendSign3" class="bigImg">
               <div class="shade">
                   <div class="shadeText clearfix" style="margin: 213px auto;">
                       <img :src="imgList.enlarge" alt="" class="clickImg pull-left">
                       <p class="clickText pull-left">点击查看大图</p>
                   </div>
               </div>
             </div>
             <p>第四步：拖放签名到合适的地方，点击"确定签约"，完成最终签名；</p>
             <div class="imgOuter" style="height: 588px;" @click="a('sendSign4')">
               <img :src="imgList.sendSign4" class="bigImg">
               <div class="shade">
                   <div class="shadeText clearfix" style="margin: 275px auto;">
                       <img :src="imgList.enlarge" alt="" class="clickImg pull-left">
                       <p class="clickText pull-left">点击查看大图</p>
                   </div>
               </div>
             </div>
             <p>第五步：签署完成后，跳转至合同管理页面。</p>
         </li>
         <!-- 确保是本人签署 -->
         <li class="helpBotRightLi" v-if="oneself">
             <h2>Q : 如何确保本人签署</h2>
             <p>A：五孚签保证其签发的证书，其主题甄别名，在五孚签产品的信任域内是唯一的，证明用户拥有私钥的方法是通过所包含的的数字签名来完成的。五孚签在为用户签发证书前，系统将自动使用用户的公钥验证其私钥签名的有效性和申请数据的完整性， 以此来判断用户拥有私钥。</p>
         </li>
         <!-- 保存多久 -->
         <li class="helpBotRightLi" v-if="serveTime">
             <h2>Q：如何保存合同，保存多久？</h2>
             <p>A：合同以电子归档的形式记录文件，确保只有被授权的可信任人员才允许访问存档数据，并通过适当的物理和逻辑访问控制防止对电子归档记录进行未授权的访问、修改、删除或其它操作。五孚签将使用可靠的归档数据存储介质和归档数据处理应用软件，确保归档数据在其归档期限内只有被授权的可信任人员才能成功访问。此外，归档合同将保存至合同证书失效后10 年。 如果法律需要，五孚签将延长记录保存期限。 以此来判断用户拥有私钥。</p>
         </li>
         <!-- 保存在哪 -->
         <li class="helpBotRightLi" v-if="serveWhere">
             <h2>Q：签署后的合同保存在哪？</h2>
             <p>A：五孚签有自动的电子归档信息的存放系统，只有被授权的可信人员才能获得归档信息。当归档信息被恢复后会对其进行完整性检验。归档的记录都会标注时间，系统产生的记录将按照要求添加时间标识。</p>
         </li>
         <!-- 验证真伪 -->
         <li class="helpBotRightLi" v-if="isTrue">
             <h2>Q：如何验证电子合同真伪？</h2>
             <p>A: 合同的真伪按照用户提交的申请材料及其身份信息进行鉴别，经鉴别符合要求后，将批准申请。若鉴别未通过，五孚签及注册机构将拒绝其申请，及时通知申请者后告知其拒绝原因。</p>
             <p>具体操作步骤：</p>
             <p>使用Adobe Reader PDF阅读器验证电子合同的有效性</p>
             <p>第一步：在您的电脑上安装Adobe Reader PDF阅读器（若已安装，直接进行第二步操作）您可以登录Adobe Reader的官方软件下载此软件。官方下载链接为：http://ardownload.adobe.com/pub/adobe/rea-der/win/11.x/11.0.00/zh_CN/AdbeRdr11000_zh_CN.exe</p>
             <p>第二步：验证电子签名合同，使用Adobe Reader PDF阅读器打开需要验证的文档，找到合同中的电子签章后，点击电子签章，即可查看电子签章的有效性，如下图所示：</p>
             <div class="imgOuter" @click="a('istrue')">
               <img :src="imgList.isTrue" class="bigImg">
               <div class="shade">
                   <div class="shadeText clearfix">
                       <img :src="imgList.enlarge" alt="" class="clickImg pull-left">
                       <p class="clickText pull-left">点击查看大图</p>
                   </div>
               </div>
             </div>
         </li>
      </ul>
    </div>
        <template>
          <div>
            <Modal v-model="modal" width="1212" class="helpCenterModal" :scrollable="false">
               <img :src="imgList.register" class="bigImg" v-if="status === '1'">
               <img :src="imgList.login1" class="bigImg" v-else-if="status === '2'">
               <img :src="imgList.login2" class="bigImg" v-else-if="status === '3'">
               <img :src="imgList.approvePerson1" class="bigImg" v-else-if="status === '4'" style="width: 540px;margin: 0 auto;">
               <img :src="imgList.approvePerson2" class="bigImg" v-else-if="status ==='5'">
               <img :src="imgList.approveCompany1" class="bigImg" v-else-if="status === '6'" style="width: 540px;margin: 0 auto;">
               <img :src="imgList.approveCompany2" class="bigImg" v-else-if="status === '7'">
               <img :src="imgList.addChapter1" class="bigImg" v-else-if="status === '8'">
               <img :src="imgList.addChapter2" class="bigImg" v-else-if="status === '9'">
               <img :src="imgList.addChapter3" class="bigImg" v-else-if="status === '10'">
               <img :src="imgList.addChapter1" class="bigImg" v-else-if="status === '11'">
               <img :src="imgList.sendSign2" class="bigImg" v-else-if="status === '12'">
               <img :src="imgList.sendSign3" class="bigImg" v-else-if="status === '13'">
               <img :src="imgList.sendSign4" class="bigImg" v-else-if="status === '14'">
               <img :src="imgList.isTrue" class="bigImg" v-else-if="status === '15'">
            </Modal>
          </div>
        </template>
  </div>
</template>
<script>
export default {
  data() {
    return {
      redRegister: true,
      loginPerson: false,
      loginCompany: false,
      login: false,
      approvePerson: false,
      approveCompany: false,
      addChapter: false,
      sendSign: false,
      oneself: false,
      serveTime: false,
      serveWhere: false,
      isTrue: false,
      imgList: {
        enlarge: "img/helpCenter/enlarge.png",
        register: "img/helpCenter/register.png",
        login1: "img/helpCenter/login-1.png",
        login2: "img/helpCenter/login-2.png",
        approvePerson1: "img/helpCenter/approvePerson-1.png",
        approvePerson2: "img/helpCenter/approvePerson-2.png",
        approveCompany1: "img/helpCenter/approveCompany-1.png",
        approveCompany2: "img/helpCenter/approveCompany-2.png",
        addChapter1: "img/helpCenter/addChapter-1.png",
        addChapter2: "img/helpCenter/addChapter-2.png",
        addChapter3: "img/helpCenter/addChapter-3.png",
        sendSign2: "img/helpCenter/sendSign-2.png",
        sendSign3: "img/helpCenter/sendSign-3.png",
        sendSign4: "img/helpCenter/sendSign-4.png",
        isTrue: "img/helpCenter/isTrue.png"
      },
      modal: false,
      status: "1"
    };
  },
  methods: {
    search() {
      let ths = this;
    },
    linkToPage(name) {
      let ths = this;
      window.scrollTo(0, 0);
      switch (name) {
        //注册
        case "Register":
          ths.redRegister = true;
          ths.loginPerson = false;
          ths.loginCompany = false;
          ths.login = false;
          ths.approvePerson = false;
          ths.approveCompany = false;
          ths.addChapter = false;
          ths.sendSign = false;
          ths.oneself = false;
          ths.serveTime = false;
          ths.serveWhere = false;
          ths.isTrue = false;
          break;
        //个人登录
        case "LoginPerson":
          ths.redRegister = false;
          ths.loginPerson = true;
          ths.loginCompany = false;
          ths.login = true;
          ths.approvePerson = false;
          ths.approveCompany = false;
          ths.addChapter = false;
          ths.sendSign = false;
          ths.oneself = false;
          ths.serveTime = false;
          ths.serveWhere = false;
          ths.isTrue = false;
          break;
        //企业登录
        case "LoginCompany":
          ths.redRegister = false;
          ths.loginPerson = false;
          ths.loginCompany = true;
          ths.login = true;
          ths.approvePerson = false;
          ths.approveCompany = false;
          ths.addChapter = false;
          ths.sendSign = false;
          ths.oneself = false;
          ths.serveTime = false;
          ths.serveWhere = false;
          ths.isTrue = false;
          break;
        //个人认证
        case "ApprovePerson":
          ths.redRegister = false;
          ths.loginPerson = false;
          ths.loginCompany = false;
          ths.login = false;
          ths.approvePerson = true;
          ths.approveCompany = false;
          ths.addChapter = false;
          ths.sendSign = false;
          ths.oneself = false;
          ths.serveTime = false;
          ths.serveWhere = false;
          ths.isTrue = false;
          break;
        //企业认证
        case "ApproveCompany":
          ths.redRegister = false;
          ths.loginPerson = false;
          ths.loginCompany = false;
          ths.login = false;
          ths.approvePerson = false;
          ths.approveCompany = true;
          ths.addChapter = false;
          ths.sendSign = false;
          ths.oneself = false;
          ths.serveTime = false;
          ths.serveWhere = false;
          ths.isTrue = false;
          break;
        //添加个人印章
        case "AddChapter":
          ths.redRegister = false;
          ths.loginPerson = false;
          ths.loginCompany = false;
          ths.login = false;
          ths.approvePerson = false;
          ths.approveCompany = false;
          ths.addChapter = true;
          ths.sendSign = false;
          ths.oneself = false;
          ths.serveTime = false;
          ths.serveWhere = false;
          ths.isTrue = false;
          break;
        //发起合同签署
        case "SendSign":
          ths.redRegister = false;
          ths.loginPerson = false;
          ths.loginCompany = false;
          ths.login = false;
          ths.approvePerson = false;
          ths.approveCompany = false;
          ths.addChapter = false;
          ths.sendSign = true;
          ths.oneself = false;
          ths.serveTime = false;
          ths.serveWhere = false;
          ths.isTrue = false;
          break;
        //发起合同签署
        case "Oneself":
          ths.redRegister = false;
          ths.loginPerson = false;
          ths.loginCompany = false;
          ths.login = false;
          ths.approvePerson = false;
          ths.approveCompany = false;
          ths.addChapter = false;
          ths.sendSign = false;
          ths.oneself = true;
          ths.serveTime = false;
          ths.serveWhere = false;
          ths.isTrue = false;
          break;
        //保存合同，保存多久
        case "ServeTime":
          ths.redRegister = false;
          ths.loginPerson = false;
          ths.loginCompany = false;
          ths.login = false;
          ths.approvePerson = false;
          ths.approveCompany = false;
          ths.addChapter = false;
          ths.sendSign = false;
          ths.oneself = false;
          ths.serveTime = true;
          ths.serveWhere = false;
          ths.isTrue = false;
          break;
        //发起合同签署
        case "ServeWhere":
          ths.redRegister = false;
          ths.loginPerson = false;
          ths.loginCompany = false;
          ths.login = false;
          ths.approvePerson = false;
          ths.approveCompany = false;
          ths.addChapter = false;
          ths.sendSign = false;
          ths.oneself = false;
          ths.serveTime = false;
          ths.serveWhere = true;
          ths.isTrue = false;
          break;
        //发起合同签署
        case "IsTrue":
          ths.redRegister = false;
          ths.loginPerson = false;
          ths.loginCompany = false;
          ths.login = false;
          ths.approvePerson = false;
          ths.approveCompany = false;
          ths.addChapter = false;
          ths.sendSign = false;
          ths.oneself = false;
          ths.serveTime = false;
          ths.serveWhere = false;
          ths.isTrue = true;
          break;
        default:
          break;
      }
    },
    a(name) {
      let ths = this;
      switch (name) {
        case "Register":
          ths.status = "1";
          $(".ivu-modal").css("width", 1212);
          break;
        case "Login1":
          ths.status = "2";
          $(".ivu-modal").css("width", 1212);
          break;
        case "Login2":
          ths.status = "3";
          $(".ivu-modal").css("width", 1212);
          break;
        case "approvePerson1":
          ths.status = "4";
          $(".ivu-modal").css("width", 540);
          break;
        case "approvePerson2":
          ths.status = "5";
          $(".ivu-modal").css("width", 1212);
          break;
        case "approveCompany1":
          ths.status = "6";
          $(".ivu-modal").css("width", 540);
          break;
        case "approveCompany2":
          ths.status = "7";
          $(".ivu-modal").css("width", 1212);
          break;
        case "addChapter1":
          ths.status = "8";
          $(".ivu-modal").css("width", 1212);
          break;
        case "addChapter2":
          ths.status = "9";
          $(".ivu-modal").css("width", 1212);
          break;
        case "addChapter3":
          ths.status = "10";
          $(".ivu-modal").css("width", 1212);
          break;
        case "sendSign1":
          ths.status = "11";
          $(".ivu-modal").css("width", 1212);
          break;
        case "sendSign2":
          ths.status = "12";
          $(".ivu-modal").css("width", 1212);
          break;
        case "sendSign3":
          ths.status = "13";
          $(".ivu-modal").css("width", 1212);
          break;
        case "sendSign4":
          ths.status = "14";
          $(".ivu-modal").css("width", 1212);
          break;
        case "istrue":
          ths.status = "15";
          $(".ivu-modal").css("width", 1212);
          break;

        default:
          break;
      }
      ths.modal = true;
    }
  }
};
</script>

<style lang="less">
.helpCenterModal {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1212px !important;
  padding-bottom: 100px;
  .ivu-modal-close {
    top: -20px;
    right: -24px;
    display: block;
    width: 24px;
    height: 24px;
    line-height: 31px;
    border-radius: 50%;
    text-align: center;
    background: #bbbbbb;
    i {
      color: #7f7f7f;
      position: relative;
      top: -3px;
      left: 0.5px;
    }
  }
  .ivu-modal-body {
    margin: 100px 0;
    padding: 0;
  }
  .ivu-modal {
    top: 0 !important;
    bottom: 100px !important;
  }
  .ivu-modal-footer {
    display: none;
  }
  img {
    width: 100%;
    border: 4px solid rgba(0, 0, 0, 0.2);
    display: block;
  }
  .ivu-modal-mask {
    background-color: rgba(0, 0, 0, 0.5);
  }
}
.helpCenter {
  .helpTop {
    background: #f6f6f6;
    padding: 60px 0 18px 0;
    .commonTitle {
      &:after {
        top: 42px;
      }
    }
    .questionOuter {
      width: 536px;
      //   height: 50px;
      margin: 35px auto 0 auto;
      position: relative;
      .question {
        width: 534px;
        height: 48px;
        border: 1px solid #eeeeee;
        border-radius: 5px;
        padding: 14px 16px;
        font-size: 1.6rem;
        color: #9a9a9a;
      }
      .searchIcon {
        position: absolute;
        top: -10px;
        right: 0;
        font-size: 40px;
        cursor: pointer;
      }
    }
  }
  .helpBot {
    .helpBotLeft,
    .helpBotRight {
      a {
        display: block;
        // margin-bottom: 16px;
        font-size: 1.4rem;
        line-height: 16px;
        color: #767676;
        &:last-child {
          margin: 0;
        }
      }
      p {
        font-size: 1.4rem;
        line-height: 25px;
        color: #6a6a6a;
      }
    }
    .helpBotLeft {
      width: 266px;
      .lastLi {
        margin-bottom: 30px;
      }
      h2 {
        font-size: 1.4rem;
        color: #6a6a6a;
        line-height: 14px;
        margin: 19px 0;
        font-weight: bold;
      }
      a {
        display: block;
        padding: 5px 0;
        margin-bottom: 6px;
        font-size: 1.4rem;
        line-height: 16px;
        color: #767676;
        &:last-child {
          margin: 0;
        }
        &:hover {
          color: #eb3437;
        }
        &.red {
          color: #eb3437;
        }
      }
    }
    .helpBotRight {
      width: 924px;
      padding-bottom: 43px;
      .helpBotRightLi {
        h2 {
          font-size: 1.4rem;
          line-height: 38px;
          color: #eb3437;
          background: #f6f6f6;
          padding-left: 5px;
          margin: 15px 0 10px 0;
          line-height: 38px;
        }
        p {
          font-size: 1.4rem;
          line-height: 38px;
          color: #6a6a6a;
          padding-left: 5px;
          &.explain {
            font-size: 14px;
            color: #ffab09;
            line-height: 38px;
          }
        }
        .imgOuter {
          position: relative;
          height: 358px;
          width: 654px;
          margin: 15px 0 15px 5px;
          &:hover {
            .shade {
              opacity: 1;
              filter: alpha(opacity=100);
            }
          }
          .bigImg {
            height: 100%;
            width: 100%;
            border: 2px solid #eeeeee;
            display: block;
          }
          .shade {
            height: 100%;
            width: 100%;
            background: rgba(181, 184, 189, 0.64);
            position: absolute;
            top: 0;
            left: 0;
            z-index: 200;
            opacity: 0;
            filter: alpha(opacity=0);
            transition: opacity 0.3s ease-in 0s;
            cursor: pointer;
            .shadeText {
              width: 134px;
              margin: 160px auto;
              .clickImg {
                height: 22px;
                width: 22px;
                margin: 8px 5px;
              }
              .clickText {
                padding: 0;
                margin: 0;
                font-size: 16px;
                line-height: 38px;
                color: #ffffff;
              }
            }
          }
        }
      }
    }
    .rightLi {
      margin-top: 50px;
    }
  }
}
</style>

